<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../utils/vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			<!-- 标签名称就是组件名称 -->
			<component1 title="title1 "></component1>
			<!-- 组件可以复用 -->
			<component1></component1>
			
		</div>
		<script type="text/javascript">
			// Vue.component('组件名称',{
			// 	以对象的方式去描述一个组件
			// })
			Vue.component('component1',{
				props:['title'],
				data:function(){
					return{
						count:0
					}
				},
				// template要有一个根节点(div),否则只显示第一个元素
				template:'<div><h1>hi~~~</h1><button type="button" v-on:click="count++">{{title}} You clicked me {{count}} times.</button></div>'
			})
			
			var vm = new Vue({
				el:'#app',
				data:{
					
				}
			})
			
		</script>
	</body>
</html>
